<template>
  <div class="television-page">
    <div class="tv-container">
      <div class="tv-title">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0bcf1381f9a43f60b39b58e891f6daa.jpg?f=webp"
          alt=""
        />
      </div>

      <div class="tv-content">
        <ul class="tv-list">
          <li class="tv-item" v-for="item in list.slice(0, 2)" :key="item.id">
            <router-link :to="'/cartCategroy/' + item.id">
              <div class="tv-item-top">
                <van-image
                  :src="item.image_url"
                  height="33.6vw"
                  width="auto"
                ></van-image>
              </div>

              <div class="tv-item-bottom">
                <p class="text-item tv-name">{{ item.zh_name }}</p>
                <p class="text-item tv-description">{{ item.description }}</p>
                <p class="text-item tv-price">￥{{ item.price }}</p>
                <p class="btn">
                  <button class="tv-btn">立即购买</button>
                </p>
              </div>
            </router-link>
          </li>
        </ul>

        <ul class="small-tv-list">
          <li
            class="small-tv-item"
            v-for="item2 in list.slice(0, 4)"
            :key="item2.id"
          >
            <router-link :to="'/cartCategroy' + item2.id">
              <div class="small-tv-item-top">
                <van-image :src="item2.image_url" height="25.6vw"></van-image>
              </div>

              <div class="small-tv-item-bottom">
                <p class="text-item small-name">{{ item2.zh_name }}</p>
                <p class="text-item small-description">
                  {{ item2.description }}
                </p>
                <p class="text-item small-price">{{ item2.price }}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllCategories } from "@/api/category";
import { onMounted, ref } from "vue";
export default {
  setup() {
    const list = ref([]);
    onMounted(async () => {
      const data = await getAllCategories();
      console.log(data);
      list.value = data.data[2].products;
    });
    return {
      list,
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  color: #666666;
}

.television-page {
  padding-bottom: 50px;
  width: 375px;
  background-color: #ffae99;
  overflow: hidden;

  .tv-title {
    img {
      width: 375px;
      height: 60px;
    }
  }

  .tv-content {
    .tv-list {
      width: 375px;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      padding: 0 5px;
      .tv-item {
        width: 176.5px;
        height: 260px;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #fff;
        margin: 3px;
        .tv-item-top {
          text-align: center;
          img {
            width: auto;
            height: 126px;
          }
        }
        .tv-item-bottom {
          padding-top: 12px;
          .text-item {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 18px;
            line-height: 18px;
            text-align: center;
          }
          .tv-name {
            font-size: 14px;
            font-weight: 700;
          }
          .tv-description {
            font-size: 12px;
          }
          .tv-price {
            font-size: 14px;
            color: #ea625b;
          }
          .btn {
            text-align: center;
          }
          .tv-btn {
            width: 100px;
            height: 30px;
            background-color: #ea625b;
            font-size: 14px;
            border-radius: 2px;
            color: #fff;
            border: none;
          }
        }
      }
    }

    .small-tv-list {
      display: flex;
      flex-wrap: wrap;
      padding: 0 5px;
      width: 375px;
      box-sizing: border-box;
      .small-tv-item {
        display: flex;
        flex-direction: column;
        width: 113px;
        height: 177px;
        border: 1px solid #f5f5f5;
        margin: 3px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 5px;
        .small-tv-item-top {
          width: 113px;
          height: 110px;
          background-color: #fff;
          text-align: center;
        }
        .small-tv-item-bottom {
          width: 113px;
          box-sizing: border-box;
          padding: 12px 5px 0;
          overflow: hidden;
          .text-item {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 18px;
            line-height: 18px;
            text-align: center;
          }
          .small-name {
            font-size: 12px;
            color: #333;
            font-weight: 700;
          }
          .small-description {
            font-size: 12px;
            color: #666;
          }
          .small-price {
            font-size: 14px;
            color: #ea625b;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>